<template>
  <div class="app-container">

    <SearchContent :queryParams="queryParams" @query="handleQuery" @reset="resetQuery">
      <el-col :span="6">
        <el-form-item label="订单编号:">
          <el-input v-model="queryParams.orderNo" clearable placeholder="请输入订单编号"/>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="出租方:">
          <el-input v-model="customerName" @focus="handleFocus" ref="refInput" clearable
                    placeholder="请输入出租方"/>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="承租方:">
          <el-select v-model="queryParams.leaseeId" placeholder="请选择承租方">
            <el-option v-for="item in rentOutList" :label="item.deptName"
                       :value="item.deptId" :key="item.deptId"/>
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="退保状态:">
          <el-select v-model="queryParams.refundStatusList" multiple placeholder="请选择退保状态">
            <el-option v-for="item in dict.type.refund_status" :key="item.value" :label="item.label"
                       :value="item.value"/>
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="财务状态:">
          <el-select v-model="queryParams.financeStatus" placeholder="请选择财务状态">
            <el-option v-for="item in dict.type.finance_status" :key="item.value" :label="item.label"
                       :value="item.value"/>
          </el-select>
        </el-form-item>
      </el-col>

    </SearchContent>

    <div class="card-wrap card-padding">
      <div class="table-title-wrap justify-end">

        <e-button type="primary" size="mini"
                  v-hasPermi="['deliveryVehicle:index:add']"
                  @click="handleAdd">
          新增
        </e-button>

      </div>
      <table-page :loading="loading" :dataList="dataList" :total="total" :page.sync="queryParams.pageNum"
                  :limit.sync="queryParams.pageSize" @setSizeCurrent="handleList" :isSelect="false" border>
        <template slot="tableColAc">
          <el-table-column label="操作" align="center" fixed="left" min-width="100">
            <template slot-scope="{row}">
              <el-button size="mini" type="text" v-hasPermi="['deliveryVehicle:index:view']"
                         @click="handleView(row, 'view')">查看
              </el-button>

              <el-button size="mini" type="text" v-hasPermi="['deliveryVehicle:index:view']"
                         v-if="row.refundStatus === '0'"
                         @click="handleEdit(row, 'edit')">处理
              </el-button>

            </template>
          </el-table-column>

        </template>

        <template slot="tableCol">
          <el-table-column align="center" label="退保证金单号" min-width="200">
            <template #default="{row}">
              {{  row.unpreparedCarCode || '-' }}
            </template>
          </el-table-column>

          <el-table-column align="center" label="审核状态" min-width="130">
            <template #default="{row}">
              {{ selectDictLabel(dict.type.refund_status, row.refundStatus) }}
            </template>
          </el-table-column>

          <el-table-column align="center" label="审批状态" show-overflow-tooltip min-width="130">
            <template #default="{row}">
              {{ row.expenseStatus || '-' }}
            </template>
          </el-table-column>


          <el-table-column align="center" label="财务状态" min-width="130">
            <template #default="{row}">
              {{ row.financeStatus == '0' ? '-' : selectDictLabel(dict.type.finance_status, row.financeStatus) }}
            </template>
          </el-table-column>

          <el-table-column align="center" label="订单号" show-overflow-tooltip min-width="200">
            <template #default="{row}">
              <el-button type="text" @click="handleTo(row)">{{ row.orderNo }}</el-button>
            </template>
          </el-table-column>

          <el-table-column align="center" label="出租方" show-overflow-tooltip min-width="160">
            <template #default="{row}">
              {{ row.lessorName || '-' }}
            </template>
          </el-table-column>

          <el-table-column align="center" label="承租方" min-width="160" show-overflow-tooltip>
            <template #default="{row}">
              {{ row.leaseeName || '-' }}
            </template>
          </el-table-column>

          <el-table-column align="center" label="交车总数量" min-width="130">
            <template #default="{row}">
              {{ row.quantityDelivery || '-' }}
            </template>
          </el-table-column>

          <el-table-column align="center" label="已交车数量" min-width="130">
            <template #default="{row}">
              {{ row.quantityDelivered}}
            </template>
          </el-table-column>

          <el-table-column align="center" label="未交车数量" min-width="130">
            <template #default="{row}">
              {{ row.quantityUndelivered || '-' }}
            </template>
          </el-table-column>

          <el-table-column align="center" label="退保证金车辆数" min-width="130">
            <template #default="{row}">
              {{ row.returnDepositNum || '-' }}
            </template>
          </el-table-column>

          <el-table-column align="center" label="退保金额" min-width="130">
            <template #default="{row}">
              {{ (format_thousand(row.returnDeposit)) }}
            </template>
          </el-table-column>

          <el-table-column align="center" label="申请人" min-width="130">
            <template #default="{row}">
              {{ row.applyName || '-' }}
            </template>
          </el-table-column>

        </template>
      </table-page>
    </div>

    <addDialog ref="refAddDialog" :rentOutList="rentOutList"/>
  </div>
</template>

<script>
import {rentOutexclude,} from "@/api/contractTemplate/electronicContract.js";
import * as apis from "@/api/deliveryVehicle"
import SearchContent from "@/components/SearchContent/index.vue";
import {queryPageList} from "@/api/deliveryVehicle";

export default {
  name: 'DeliveryVehicleList',
  dicts: ['refund_status', 'finance_status','refund_status'],
  components: {
    SearchContent,
    addDialog: () => import('./components/addDialog.vue')
  },
  computed: {},
  watch: {},
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderNo: '',
        lessorId: '',
        leaseeId: '',
        refundStatusList: [],
        financeStatus: ''
      },
      customerName: '',
      total: 0,
      loading: false,
      dataList: [
        {carNo: '656223'}
      ],
      companyOriginList: [],
      rentOutList: [],
    };
  },
  created() {
    this.handleList()
    this.handleRentOut()
  },
  activated() {
    this.handleList()
  },
  mounted() {
  },
  methods: {
    async handleRentOut() {
      try {
        let res = await rentOutexclude({deptType: 2})
        this.rentOutList = res.data
      } catch (e) {
        console.error(e)
      }
    },

    handleFocus() {
      this.$SelectDialog({title: '', type: 'userNo'}).then(
          ({res, type}) => {
            this.queryParams.lessorId = res.customerId
            this.customerName = res.customerName
            this.$refs.refInput.blur()
          },
      );
    },

    async handleList() {
      this.loading = true
      try {
        let res = await apis?.queryPageList(this.queryParams)
        const {rows, total} = res
        this.dataList = rows
        this.total = total
      } catch (e) {
        console.error(e)
      } finally {
        this.loading = false
      }
    },

    handleView(row) {
      this._toPage({
        path: "/vehicleOrder/orderManagement/DeliveryVehicleDetails",
        name: 'DeliveryVehicleDetails',
        query: {
          id: row.unpreparedCarId,
          flowId: row.flowId,
        }
      });
    },

    handleEdit(row){
      this._toPage({
        path: "/vehicleOrder/orderManagement/DeliveryVehicleEdit",
        name: 'DeliveryVehicleEdit',
        query: {
          unpreparedCarId: row.unpreparedCarId,
          flowId: row.flowId,
        }
      });
    },

    handleQuery() {
      this.queryParams.pageNum = 1
      this.handleList()
      console.log(this.queryParams.refundStatusList)
    },

    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        orderNo: '',
        lessorId: '',
        leaseeId: '',
        refundStatusList: [],
        financeStatus: ''
      }
      this.customerName = ''
      this.handleList()
    },

    handleAdd() {
      this.$refs.refAddDialog.handleOpen()
    },

    handleTo(row) {
      this._toPage({
        name: 'OrderDetails',
        query: {
          type: row.carType,
          orderId: row.orderId,
          calcSchemeId: row.calcSchemeId,
        },
      });
    }
  },
};
</script>

<style scoped lang=""></style>


